

// 存放所需组件
// 文章
const ARTICLE = {
    props: ['article'],
    template:`
        <div class="myArticle">
            <div class="title">
                <a :href="'/articleDetail/'+article.articleId">
                    {{article.title}}
                </a>
            </div>
            <div class="center">
                <div class="content">{{article.description}}...</div>
                <a class="cover" :href="'/articleDetail/'+article.articleId">
                    <img :src="article.cover" alt="">
                </a>
            </div>
            <div class="gray small extra">
                <ul>
                    <li>
                        <div>
                            <i class="comment icon"></i>
                            {{article.comments}}
                        </div>
                    </li>
                    <li>
                        <div>
                            <i class="eye icon"></i>
                            {{article.views}}
                        </div>
                    </li>
                    <li>
                        <div>
                            <i class="heart icon"></i>
                            {{article.likes}}
                        </div>
                    </li>
                    <li>
                        <div>
                            <i class="clock icon"></i>
                            {{article.createTime}}
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    `
}
// 左侧导航栏
const LEFT_NAV = {
    props: ['menu', "controller"],
    template: `
        <div class="center leftNav">
            <ul>
                <li v-for="(m, index) in menu" @click="sendShowIndex(index)" class="item" :class="{active:index == 0}">
                    <i v-if="m.icon" :class="[m.icon]"></i>
                    <a v-if="m.href" :href="[m.href]">{{m.name}}</a>
                    <a v-else href="#">{{m.name}}</a>
                    <div v-if="m.count" class="ui red label">{{m.count}}</div>
                </li>
            </ul>
            <div v-if="controller != 0" class="center" id="controller" style="width:72px;">
                <i class="large caret right icon"></i>
            </div>
        </div>
    `,
    methods:{
        // 子组件给父组件发送信息
        sendShowIndex(showIndex){
            this.$emit("send-show-index", showIndex)
        }
    },
    updated(){
        // 导航栏的切换 
        myExchangeClass(".leftNav .item")
        addActiveFirst(".leftNav .item")
        // 通过单击>控制导航栏的显示与隐藏
        $(".leftNav #controller").click(function(){
            let target = $(".leftNav")
            let ul = $(".leftNav ul")
            let width = target.css("width")
            if (width == "0%") {
                width = "25%"
            } else {
                width = "0%"
            }
            target.animate({width: width}, 'slow')
            
        })
    }

}

const HORIZONTAL_NAV = {
    props: ["menu"],
    template: `
        <div class="horizontalNav">
            <ul class="ui secondary pointing menu">
                <li v-for="(m, index) in menu" class="item" @click="sendShowIndex(index)" :class="{active:index == 0}">
                    <i v-if="m.icon" :class="[m.icon]"></i>
                    <a v-if="m.href" :href="[m.href]">{{m.name}}</a>
                    <a v-else href="#">{{m.name}}</a>
                    <div v-if="m.count" class="ui red label">{{m.count}}</div>
                </li>
            </ul>
        </div>
    `,
    methods:{
        // 子组件给父组件发送信息
        sendShowIndex(showIndex){
            this.$emit("send-show-index", showIndex)
        }
    },
    updated(){
        // 导航栏的切换 
        myExchangeClass(".horizontalNav .item")
        addActiveFirst(".horizontalNav .item")
    }
}

// 专题简介
const CLASSIFY_PROFILE = {
    props: ["classify"],
    template: `
    <div class="classifyProfile" v-if="classify">
        <!-- 专题头部 -->
        <div class="center">
            <div class="headImage" :style="{'background-image':'url('+classify.image+')'}">
                <span class="large">{{classify.name}}</span>
            </div>
        </div>
        <div class="center small gray" style="margin: 36px auto;">
            收录了{{classify.articles}}篇文章
            {{classify.fans}}人关注
        </div>
        <!-- 专题描述 -->
        <div>
            <p class="center large">专题公告</p>
            <p class="gray description"></p>
        </div>
    </div>
    `,
    // 更新数据
    updated:function(){
        // props中的数据不需要定义，直接使用即可
        replaceHtml(".classifyProfile .description", this.classify.description)
    }
}

// 消息--用户信息
const MESSAGE_USER_INFO = {
    props: ['f', 'total_message', 'is_follow'],
    template: `
    <div class="messageUserInfo">
        <div class="ui red label" v-if="total_message">{{total_message}}</div>
        <div class="center">
            <a :href="'/user/' + f.userId">
                <div class="headImage" :style="{'background-image':'url(' + f.headImage + ')'}">
                    {{f.name}}
                </div>
            </a>
            <div class="small gray articleTitle">
                <span v-if="is_follow">您关注了 </span>
                <span v-else>关注了您 </span>
                <span>{{f.createTime}}</span>
            </div>
            <div>
                <i class="chevron down icon">
                    <ul>
                        <li @click.stop="block(f.userId)">
                            <div class="center">
                                <i class="ban icon"></i>
                                <div>拉黑</div>
                            </div>
                        </li>

                        <li @click.stop="report(f.userId)">
                            <div class="center">
                                <i class="exclamation triangle icon"></i>
                                <div>举报</div>
                            </div>
                        </li>
                    </ul>
                </i>
            </div>
        </div>
    </div>
    `,
    methods:{
        // 拉黑
        block(userId) {
            swalConfirm("确认拉黑" + this.f.name + "？", "拉黑后，将无法接收到对方的消息，并删除好友", "error", function(){
                get("block/" + userId)
            })
        },
        // 举报
        report(userId) {
            swalConfirm("确认举报" + this.f.name + "？", "举报信息经核实后，会在3个工作日内将结果告知您", "error", function(){
                get("report/" + userId)
            })
        }
    },
    updated:function(){
    }
}

// 动态用户行为
const DYNAMIC_USER_INFO = {
    props: ['user', "option", "create-time", "extend"],
    template: `
        <div class="dynamicUserInfo">
            <div class="headImage" :style='{"background-image":"url("+user.headImage+")"}'></div>
            <a class="center" :href="'/user/'+user.userId">{{user.name}}</a>
            <div class="small gray">
                <p v-if="extend">{{extend}}</p>
                <p v-if="createTime">{{option}} {{createTime}}</p>
            </div>
        </div>
    `
}
const USER_INFO = {
    props: ['user'],
    template: `
        <div class="center userInfo">
            <div class="headImage" :style='{"background-image":"url("+user.headImage+")"}'></div>
            <a class="center" :href="'/user/'+user.userId">{{user.name}}</a>
            <div class="small gray">
                <p>{{user.createTime}}</p>
            </div>
            <button class="ui primary button" @click="removeBlock(user.userId)">移除</button>
        </div>
    `,
    methods:{
    },
}
// 窗口


        
const FACE_WINDOW = {
    // state开关的状态
    props: ['state', 'tip'],
    template: `
    <div class="faceWindow" v-show="state">
        <i class="close icon" @click="closeWindow()"></i>
        <textarea class="prompt" type="text" :placeholder="tip" id="inputTextarea"></textarea>
        <p class="center gray">enter键确认</p>
    </div>
    `,
    methods:{
        // 关闭窗口，函数名不能为close
        closeWindow() {
            $(function () {
                $(".faceWindow").hide()
                $(".faceWindow textarea").val("")
            })
            this.$emit("send-state", false)
            
        },
        // 打开窗口，
        openWindow() {
            $(function () {
                // 自动聚焦
                setTimeout(function(){
                    $(".faceWindow textarea").focus()
                }, 100)
                $(".faceWindow").show()
            })
        },
        sendMsg(msg){
            console.log("发送信息:" + msg);
            this.$emit("send-content", msg)
        }
    },
    watch:{
        state(){
            let state = false
            if (!this.state) {
                this.closeWindow()
            } else {
                this.openWindow()
                state = true
            }
        }
    },
    updated(){
        // 检测enter键，并发射文本框中的内容
        let that = this
        $(".faceWindow").keydown(function (event) {
            if (event.keyCode == 13) {
                let msg = $(".faceWindow textarea").val()
                that.sendMsg(msg.trim())
            }
        });
    }
}